<template>
<div>
  <el-row :gutter="20" class="item-row">
    <el-col :span="6">
      <div class="item-content item-content-1">
        <div class="card-title">
          <div class="card-title-div">
            <div class="card-title-icon"> <svg-icon icon-class="money_bag_fill"></svg-icon></div>
            <div class="card-title-name">总收益</div>
          </div>
        </div>
        <div class="all-count">&nbsp;¥&nbsp;
          <span>&nbsp;123,342</span>
          <span class="suffix">元</span>
        </div>
        <div class="card-info">
          <div class="card-info-div">
            <div class="card-info-top">日销售额：￥2103</div>
            <div class="card-info-bottom">同比增长：6%</div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="item-content item-content-2">
          <div class="card-title">
          <div class="card-title-div">
            <div class="card-title-icon"> <svg-icon icon-class="jilu"></svg-icon></div>
            <div class="card-title-name">护士数量</div>
          </div>
        </div>
        <div class="all-count">
          <span>&nbsp;{{doctorNum*5+7}}&nbsp;</span>
          <span class="suffix">个</span>
        </div>
        <div class="card-info">
          <div class="card-info-div">
            <div class="card-info-bottom">日访问量：194次</div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="item-content item-content-3">
          <div class="card-title">
          <div class="card-title-div">
            <div class="card-title-icon"> <svg-icon icon-class="shopping"></svg-icon></div>
            <div class="card-title-name">服务数量</div>
          </div>
        </div>
        <div class="all-count">
          <span>&nbsp;{{serviceNum*20+43}}&nbsp;</span>
          <span class="suffix">次</span>
        </div>
        <div class="card-info">
          <div class="card-info-div">
            <div class="card-info-bottom">日加购数：15</div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="item-content item-content-4">
          <div class="card-title">
          <div class="card-title-div">
            <div class="card-title-icon"> <svg-icon icon-class="play"></svg-icon></div>
            <div class="card-title-name">订单数量</div>
          </div>
        </div>
        <div class="all-count">
          <span>&nbsp;30&nbsp;</span>
          <span class="suffix">笔</span>
        </div>
        <div class="card-info">
          <div class="card-info-div">
            <!-- <div class="card-info-top">日支付数：1978</div> -->
            <div class="card-info-bottom">转换率：16%</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div class="container-card">
    <el-card class="box-card" style="padding:-5px;">
      <span><font style="font-weight:bold;">通知公告:</font><font style="color:#1890ff;">欢迎您的访问，医约宝为您提供优质的服务。</font>|&nbsp;&nbsp;<font style="color:purple;">网上预约，院外护理。&nbsp;&nbsp;</font><a style="color:red;" href="#">联系我们</a></span>
    </el-card>
  </div>
  <!-- <EchartDemo></EchartDemo> -->
  <el-row :gutter="12">
  <el-col :span="8">
    <el-card shadow="always">

      <div slot="header">
        <span>消费种类占比</span>
      </div>
      <div>
        <ChartLine></ChartLine>
      </div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
      <div slot="header">
        <span>订单人数统计</span>
      </div>
      <div>
        <ChartLine2></ChartLine2>
      </div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="never">
      <div slot="header">
        <span>热门点击</span>
      </div>
      <div>
        <!-- <ChartWrapper></ChartWrapper> -->
      </div>
    </el-card>
  </el-col>
</el-row>
</div>
</template>

<script>
import { getmoney } from "@/api/user/money"
import { doctornum } from "@/api/user/user"
import { getservicenum,ordernum } from "@/api/service/service"
import ChartLine from '@/components/EchartDemo/chartLine.vue'
// import EchartDemo from "@/components/EchartDemo/index.vue"
import ChartLine2 from "@/components/EchartDemo/chartLine2.vue"
import ChartWrapper from "@/components/EchartDemo/chartWrapper.vue"
export default {

    data() {
        return {
            zsy: "",
            serviceNum: "",
            orderNum: "",
            doctorNum: '',
            allMoney: "",
            applyUser: ""
        };
    },
    created() {
        this.loading();
    },
    methods: {
        loading() {
            // this.getzsy(); //总收益
            // this.getdoctornum(); //技师总数
            // this.getapplyuser(); //申请人数
            // this.requestservicenum(); //服务数量
            // this.requestordernum(); //服务流水
            // this.requestallmoney(); //订单数量
        },
        requestordernum() {
            let that = this;
            ordernum({
                field: "order_id",
                op: ">",
                value: 0
            }).then(res => {
                // console.log("orderNum:", res);
            });
        },
        requestservicenum() {
            let that = this;
            getservicenum({
                field: "s_id",
                op: ">",
                value: "0"
            }).then(res => {
                this.serviceNum = res;
                // console.log("serviceNum:", res);
            });
        },
        getapplyuser() {
            let that = this;
            doctornum({
                field: "status",
                op: "=",
                value: "0"
            }).then(res => {
                this.applyUser = res;
                // console.log("applyUser:", res);
            });
        },
        getdoctornum() {
            let that = this;
            doctornum({
                field: "status",
                op: "=",
                value: "1"
            }).then(res => {
                this.doctorNum = res;
                // console.log("doctorNum:", res);
            });
        },
        requestallmoney() {
            let that = this;
            getmoney({
                field: "id",
                op: ">",
                value: 0,
                start_time: 0,
                end_time: "9999999999999",
                field1: "",
                op1: "",
                value1: ""
            }).then(res => {
                res.forEach(val => {
                    this.allMoney =
                        parseFloat(that.item[1].data) +
                            parseFloat(val.admin_yue) +
                            parseFloat(val.doc_yue) +
                            parseFloat(val.o_yue);
                });
                // console.log("allMoney:", res);
            });
        },
        getzsy() {
            let that = this;
            getmoney({
                field: "id",
                op: ">",
                value: 0,
                start_time: 0,
                end_time: "9999999999999",
                field1: "",
                op1: "",
                value1: ""
            }).then(res => {
                res.forEach(val => {
                    that.item[0].data = parseFloat(that.item[0].data) + parseFloat(val.admin_yue);
                });
            });
        }
    },
    components: { ChartLine,ChartLine2, ChartWrapper }
}
</script>

<style lang="scss" scoped>

.item-row{
  width: 100%;
}
.item-content{
  width: 100%;

  display: block;
  border-radius: 10px;
  padding-left: 12px;
  padding-right: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 149px;
  padding: 15px 15px 0;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 25px;
}
.card-title{
  color: #fff;
  font-size: 1rem;
  .card-title-div{
    align-items: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    .card-title-icon{
      margin-right: 8px;
    }
  }
}
.all-count{
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin-top: 12px;
  padding-left: 25px;
  .suffix{
    font-size: .75rem;
  }
}
.card-info{
  margin-top: 20px;
  color: #fff;
  font-size: .85rem;
  height: 46px;
  margin-top: px;
  position: relative;
  .card-info-div{
    position: absolute;
    bottom: 7px;
    left: 0;
    .card-info-top{
      margin-right: 8px;
    }
  }
}
.item-content:hover{
  -webkit-box-shadow: 3px 5px 15px rgb(40 40 40 / 36%);
  box-shadow: 3px 5px 15px rgb(40 40 40 / 36%);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
.item-content-1{
  background: -webkit-gradient(linear,left top,right top,from(#5171fd),to(#c97afd));
  background: linear-gradient(90deg,#5171fd,#c97afd);
  -webkit-box-shadow: 0 5px 10px #c97afd;
  box-shadow: 0 5px 10px #c97afd;
}
.item-content-2{
  background: -webkit-gradient(linear,left top,right top,from(#3dadf6),to(#737bfc));
  background: linear-gradient(90deg,#3dadf6,#737bfc);
  -webkit-box-shadow: 0 5px 10px #737bfc;
  box-shadow: 0 5px 10px #737bfc;
}
.item-content-3{
  background: -webkit-gradient(linear,left top,right top,from(#ea677c),to(#ef9b5f));
  background: linear-gradient(90deg,#ea677c,#ef9b5f);
  -webkit-box-shadow: 0 5px 10px #ef9b5f;
  box-shadow: 0 5px 10px #ef9b5f;
}
.item-content-4{
  background: -webkit-gradient(linear,left top,right top,from(#42d79b),to(#a6e25f));
  background: linear-gradient(90deg,#42d79b,#a6e25f);
  -webkit-box-shadow: 0 5px 10px #a6e25f;
  box-shadow: 0 5px 10px #a6e25f;
}

.container-card{
  background: #fff;
  width: 100%;
  margin-bottom: 6px;
}
.el-card ::v-deep .el-card__body {
  padding: 8px !important;
  font-size: 14px;
}

</style>
